<template>
	<div :id="name" class="page-main">
		<v-menu :route="path" :padding="padding"></v-menu>
		<div class="page-content center">
			<slot name="main"></slot>
			<div class="page-control text center">
				<el-button type="primary" icon="el-icon-arrow-left" @click="$router.go(-1)"></el-button>
				<el-button type="primary" icon="el-icon-arrow-right" v-if="displayNext" @click="openDefaultDialog"></el-button>
			</div>
		</div>
		<div style="height: 40px"></div>
		<v-dialog ref="dialog" width="300px">
			<span slot="content-widget" style="display: block;text-align: center;">
				{{ dialogContent }}
			</span>
			<div slot="footer" style="text-align: center">
				<slot name="dialog-footer">
					<full-width-button v-for="(item, index) in dialogFooterButtons" :key="index" :type="item.type" :text="item.text" :click="() => {if (item.click) item.click(closeDialog); else goTo(item.uri)}"></full-width-button>
				</slot>
			</div>
		</v-dialog>
		<v-dialog ref="questionDialog" width="550px">
			<span slot="content-widget" style="display: block;text-align: center;">
				{{ questionDialogContent }}
			</span>
			<div slot="footer" style="text-align: left">
				<slot name="question-dialog-footer">
				</slot>
				<full-width-button v-for="(item, index) in questionDialogButtons" :key="index" :type="item.type" :text="item.text" :click="() => {if (item.click) item.click(closeQuestionDialog); else goTo(item.uri)}"></full-width-button>
			</div>
		</v-dialog>
	</div>
</template>

<script>
import { push } from '~/router'

export default {
	props: {
		name: {
			type: String,
			required: true
		},
		padding: {
			type: Boolean
		},
		dialogTitle: {
			type: String,
			default: '提示'
		},
		questionDialogTitle: {
			type: String,
			default: '提示'			
		},
		dialogContent: {
			type: String,
			default: '请根据实际情况选择'
		},
		questionDialogContent: {
			type: String,
			default: '请作答以下题目'
		},
		dialogButtons: {
			type: Array,
			default: () => {
				return []
			}
		},
		questionDialogButtons: {
			type: Array,
			default: () => {
				return []
			}
		},		
		dialogGoUri: {
			type: String
		},
		isOpenDefaultDialog: {
			type: Boolean,
			default: true
		},
		displayNext: {
			type: Boolean,
			default: true
		}
	},	
	data: function() {
		return {
			path: `/${this.name}`
		}
	},
	computed: {
		goToButtons()
		{
			return {
				type: 'primary',
				text: '继续学习',
				click: (callback) => {
					this.goTo(this.dialogGoUri)
				}
			}
		},
		dialogFooterButtons() 
		{
			let dataArray = this.dialogButtons
			
			return this.dialogGoUri ? [{
					type: 'primary',
					text: '继续学习',
					click: (callback) => {
						this.goTo(this.dialogGoUri)
					}
				}].concat(dataArray) : dataArray
		}
	},
	methods: {
		openDefaultDialog() {
			if (this.isOpenDefaultDialog)
			{
				if (this.dialogButtons.length === 0)
					this.dialogFooterButtons[0].click(() => {})
				else
					this.openDialog()				
			}
			else
				this.openQuestionDialog()
		},		
		openDialog() {
			this.$refs.dialog.openDialog(this.dialogTitle)
		},
		closeDialog() {
			this.$refs.dialog.closeDialog()
		},
		openQuestionDialog() {
			this.$refs.questionDialog.openDialog(this.questionDialogTitle)
		},
		closeQuestionDialog() {
			this.$refs.questionDialog.closeDialog()
		},
		goTo(name) {
			push(this, name);
		}		
	}
};
</script>

<style>
</style>
